<template>
    <div class="logFund">
        <el-dialog
            :title="dialog.title"
            :visible.sync="dialog.show"
            :modal-append-to-body="false"
            :close-on-click-modal="false">

            <!-- 表单区域 -->
            <div class="form">
                <el-form 
                    :model="form"
                    ref="form" 
                    :rules="form_rules"
                    label-width="120px" >
                    <el-form-item label="收支类型">
                        <el-select v-model="form.type" placeholder="收支类型">
                            <el-option
                                v-for="(formtype,index) in format_type_list" :key="index" :label="formtype" :value="formtype"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="id" label="序号">
                        <el-input type="id" v-model="form.id"></el-input>
                    </el-form-item>
                    <el-form-item prop="describe" label="收支描述">
                        <el-input type="describe" v-model="form.describe"></el-input>
                    </el-form-item>
                    <el-form-item prop="income" label="收入">
                        <el-input type="income" v-model="form.income"></el-input>
                    </el-form-item>
                    <el-form-item prop="expend" label="支出">
                        <el-input type="expend" v-model="form.expend"></el-input>
                    </el-form-item>
                    <el-form-item prop="cash" label="账户资金">
                        <el-input type="cash" v-model="form.cash"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item  class="text_right">
                        <el-button type="primary" @click='onSubmit("form")'>提  交</el-button>
                        <el-button @click="dialog.show = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
  name: "Dialog",
  props:{
    dialog:Object,
    form:Object
  },
  data () {
    return {
        format_type_list:[
            "提现",
            "提现手续费",
            "充值",
            "优惠券",
            "充值礼券",
            "转账"
        ],
        form_rules:{
            describe:[
                {required: true,message: "收支描述不能为空！", trigger: "blur"}
            ],
            income:[
                {required: true,message: "收入不能为空！", trigger: "blur"}
            ],
            expend:[
                {required: true,message: "支出不能为空！", trigger: "blur"}
            ],
            cash:[
                {required: true,message: "账户资金不能为空！", trigger: "blur"}
            ],
        }
    };
  },
  methods: {
      onSubmit(form){
          this.$refs[form].validate((valid) => {
              if(valid){
                //   判断点击的是 添加还是编辑
                const url = this.dialog.option == 'adds' ? 'adds':`edit/${this.form.id}`
                  this.$axios.post(`/api/profile/${url}`,this.form)
                  .then(res => {
                      this.$message({
                          type:"success",
                          message:"数据保存成功！"
                      })
                    console.log(res)
                    //   隐藏 dialog
                    this.dialog.show = false
                    // 自动更新添加或修改的数据
                    this.$emit("update")
                  })
              }
          })
      }
  },
}
</script>
<style scoped>
</style>